﻿<br />
<br />
<br />
<br />
<form id="myform">
    <div align="center" valign="center">
        <table border="0" width="100%">
            <tr>
                <td height="30" align="center">
                    <h3>Login</h3>
                </td>
            </tr>
            <tr>
                <td height="50" align="center">
                    <input type="text" id="username" name="username" placeholder="Username" />
                </td>
            </tr>
            <tr>
                <td height="50" align="center">
                    <input type="password" id="password" name="password" placeholder="Password" />
                </td>
            </tr>
            <tr>
                <td height="50" align="center">
                    <input type="checkbox" id="rememberme" checked="checked" />
                    Remember Me
                </td>
            </tr>
            <tr>
                <td height="50" align="center">
                    <button type="submit" id="login">Login</button>
                </td>
            </tr>
            <tr>
                <td height="30" align="center">
                    <div id="message" />
                </td>
            </tr>
        </table>
    </div>
</form>

<script type="text/javascript">

    $(document).ready(function () {

        $("#myform").ajaxForm();

        $("#myform").validate({
            rules: {
                username: { required: true, minlength: 1, maxlength: 50 },
                password: { required: true, minlength: 1, maxlength: 12 }
            },
            messages: {
                username: { required: '', minlength: '', maxlength: '' },
                password: { required: '', minlength: '', maxlength: '' }
            },
            submitHandler: function () {
                $("#message").html("Logging in...");
                var data = {
                    "username": $("#username").val(),
                    "password": $("#password").val(),
                    "rememberMe": $("#rememberme").prop("checked")
                };
                $.ajax({
                    url: "@Url.Action("Authenticate", "Home")",
                    type: "POST",
                data: JSON.stringify(data),
                dataType: "json",
                contentType: "application/json",
                success: function (status) {
                    $("#message").html(status.Message);
                    if (status.Success) {
                        window.location.href = status.TargetURL;
                    }
                },
                error: function () {
                    $("#message").html("Error while authenticating user credentials!");
                }
            });
            }
        });

    });

</script>
